<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="css/bootstrap.css" rel="stylesheet">
    <script src="js/jquery-1.12.4.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/vue.js"></script>
    <style>
        body{
            text-align: center;
        }
        th{
            text-align: center;
        }
        .xuan:hover{
            background-color: #2e6da4;
        }
    </style>
</head>
<body>
    <div id="app">
        <form class="form-inline">
            <div class="form-group">
                <label for="exampleInputName2">ID</label>
                <input type="text" class="form-control" v-model="id" placeholder="ID">
            </div>
            <div class="form-group">
                <label for="exampleInputEmail2">名称</label>
                <input type="email" class="form-control" v-model="name" placeholder="名称">
            </div>
            <button type="button" @click.prevent="add" class="btn btn-default">添加</button>
            <div class="form-group">
                <label for="exampleInputEmail2">搜索关键字</label>
                <input type="email" class="form-control" v-model="keywords" placeholder="关键字">
            </div>
        </form>
        <table class="table table-bordered">
            <tr>
                <th>ID</th>
                <th>品牌名称</th>
                <th>添加时间</th>
                <th>操作</th>
            </tr>
            <tr v-for="item in search(keywords)":key="item.id" class="xuan">
                <td>{{item.id}}</td>
                <td v-text="item.name"></td>
                <td v-html="item.cdate"></td>
                <td><a href="del" @click.prevent="del(item.id)">删除</a></td>
            </tr>
        </table>
    </div>
    <script>
        Vue.config.devtools=true;
        var vm = new Vue({
            el:'#app',
            data:{
                id:'',
                name:'',
                keywords:'',
                list:[
                    {id:1,name: '张三',cdate:new Date().toLocaleString()},
                    {id:2,name: '李四',cdate:new Date().toLocaleString()}
                ]
            },
            methods:{
                add(){
                    var user = {id:this.id,name:this.name,cdate:new Date().toLocaleString()};
                    this.list.push(user);
                    this.id = "";
                    this.name = "";
                },
                del(id){
                    this.list.some((item,index)=>{
                        if(item.id == id){
                            this.list.splice(index,1);
                            return true;
                        }
                    })
                },
                search(keywords){
                    var newList = [];
                    this.list.forEach((item,index) =>{
                        if(item.name.indexOf(keywords) != -1){
                            newList.push(item);
                        }
                    })
                    return newList;
                }
            }
        });

    </script>
</body>
</html>